<template>
	<div class="box">
		<h5>优惠卷 / 添加优惠卷</h5>
		<button @click="goto()" class="screening_one">返回</button>
		<div class="nav">
			<h4>请填写优惠卷相关信息</h4>
			<br>

			<br><br>
			<span class="example-block">优惠卷类型</span>
			<div class="m-4" id="type">
			    <el-cascader :options="options" :props="props1" clearable v-model="prom_coupon.name" />
			  </div>
			<div class="Input_box_one">
				<span class="title">优惠卷数量</span>
				<input placeholder="请输入" clearable class="number"  v-model="prom_coupon.state_s" /> 张
			</div>
			<div class="Input_box_one">
				<span class="title">优惠卷面额</span>
				<input placeholder="请输入" clearable class="number" v-model="prom_coupon.face_value" /> 元
			</div>
			<div class="Input_box_one">
				<span class="title">使用门槛</span>
				<el-checkbox-group v-model="checkedCities" class="ml-4" id="Click" :min="0" :max="1">
					<el-checkbox v-for="city in cities" :key="city" :label="city">{{
					      city
					    }}</el-checkbox>
						<input placeholder="请输入" clearable class="number" v-model="prom_coupon.prom_sill" /> 元 <span> 可用</span>
				</el-checkbox-group>
				
			</div>
			<div class="Input_box_one">
				<span class="title">使用范围</span>
				<!-- <el-radio-group v-model="radio2" class="ml-4">
			      <el-radio label="one" >所有课程</el-radio>
			      <el-radio label="two" >指定课程</el-radio>
			</el-radio-group> -->
				<el-checkbox-group v-model="prom_coupon.use_scope" class="shu" id="Click" >
					<el-checkbox label="所有课程" name="type"  />
					<el-checkbox label="预定课程" name="type" />
				</el-checkbox-group>
			</div>
			<div class="Input_box_one">
				<span class="title">有效期:</span>
				<el-checkbox-group v-model="form.type" class="shu" id="Click_one">
					<el-checkbox label="日期范围" name="type"  />
				</el-checkbox-group>
				<el-date-picker v-model="timeRange" type="datetimerange" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期" @change="getList" :disabledDate="disablesDate"  />
				<br>
				<el-checkbox-group v-model="form.type" class="shu" id="Click_two">
					<el-checkbox label="指定课程" name="type"  />
				</el-checkbox-group>
				<input placeholder="请输入" clearable class="number" v-model="prom_coupon.prom_day " /> <span> 天</span>
				<el-row class="mb-4" style="margin-left: 70px;">
				 <el-button type="primary" style="background-color: #38a28a;" class="immediately"  @click="add()">立即添加</el-button>
					<el-button plain class="cancel">取消</el-button>
				</el-row>
			</div>
		</div>

	</div>
</template>

<script>
	import { ref } from 'vue'
	import { reactive } from 'vue'
	import { addPromCoupon, promCoupon } from '../api/api.js'

	export default {
		name: 'cao',
		setup() {
			const radio1 = ref('1');
			const radio3 = ref('one');
			const radio4 = ref('one');
			const checkedCities = ref(['满']);
			const cities = ['满', '无门槛'];
			const props1 = { checkStrictly: true };
			
			const props2 = {  multiple: true, checkStrictly: true, };
			const options = [
			  {
			    value: '语文',
			    label: '语文'
			  },
			  {
			    value: '数学',
			    label: '数学'
			  },
			  {
			    value: '英语',
			    label: '英语'
			  }
			]
			//添加的字段
			const prom_coupon = ref({
				prom_num: '',
				name:'',
				prom_sill:'',
				use_scope:[],
				prom_day:'',
				face_value:'',
				state_s:''
			});
			
			const form = reactive({
				type: [],
			})
			return {
				radio1,
				radio3,
				radio4,
				form,
				prom_coupon,
				checkedCities,
				cities,
				props1,
				props2,
				options
			}
		},
		disablesDate(time) {
			const _minTime = Date.now() + 24 * 60 * 60 * 1000 * 7 //最小时间可选前七天
			const _maxTime = Date.now() - 24 * 60 * 60 * 1000 * 1 //最大时间可选今天
			return time.getTime() <= _maxTime || time.getTime() > _minTime
		},
		methods: {
			goto() {
				this.$router.push('/Coupon')
			},
			add() {
				let _data = this.prom_coupon
				
				addPromCoupon(_data)
					.then(res => {
						console.log(res);
						this.promCoupon();
						
					})
					.catch(err => {
						console.log(err);
					})
			}
		}
	}
</script>
	
<style>
	#type{
		display: inline-block;
	}
	.title{
		font-weight: bold;
	}
	.box input[type=text]::placeholder{
	       color: #a8abb2;
	     }
	.cancel{
		margin-top: 10px;
	}
	.immediately{
		margin-left: 29px;
		margin-top: 10px;
	}
	.Input_box_one {
		width: 100%;
		height: 50px;
		margin-top: 10px;
		margin-bottom: 10px;
		line-height: 50px;
	}
	#Click_two{
		margin-left: 98px;
		margin-right: -2px;
	}
	#Click_one{
		margin-left: 40px;
		margin-right: 10px;
	}
	#Click{   /* 无门槛 / 满 ...*/
		margin-left: 28px;
		display: inline-block;
	}
	.shu {
		display: inline-block;
	}

	.example-block {
		margin-right: 1rem;
		font-weight: bold;
	}

	.Input_box>p {
		margin-left: 80px;
		font-size: 14px;
	}

	.quan {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background-color: #38a28a;
		margin: auto;
	}

	.shang {
		text-align: center;
		width: 80px;
		height: 80px;
		background-color: #fafafa;
		display: inline-block;
		font-size: 14px;
	}

	.Input_box {
		width: 100%;
		height: 50px;
		margin-top: 30px;
		margin-bottom: 30px;
		line-height: 50px;
	}

	.Input_box-o {
		width: 100%;
		height: 50px;
		margin-top: 30px;
		line-height: 50px;
	}
	.number::placeholder{
		color: #a8abb2;
	}
	.number {
		width: 217.5px;
		height: 40px;
		border: 1px solid #dcdfe6;
		border-radius: 5px;
		outline: none;
		padding-left: 10px;
		margin-left: 11px;

	}

	.box {
		width: calc(100% - 60px);
		background-color: #f0f0f0;
		padding: 35px 30px;
	}

	h5{
		float: left;
		margin-bottom: 20px;
	}
	h4 {
		float: left;
		margin-top: 20px;
	}
	/*  */
	.box>button {
		background-color: #38a28a;
		color: white;
		width: 70px;
		height: 30px;
		float: right;
		border: none;
		border-radius: 5px;
		margin-top: -10px;
		text-align: center;
	}

	.nav {
		width: calc(100% - 60px);
		height: 100vh;
		margin-top: 30px;
		padding: 0 30px;
		background-color: white;
		color: black;
		margin-bottom: 20px;
		overflow: hidden;
	}
	*{
		margin: 0;
		padding: 0;
		list-style: none;
		text-align: left;
	}
</style>
